<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
    <el-row style="margin-top: 15px;">
      <el-col :span="23" style="text-align: right;">
        <el-button class="btn_1" type="sucess" @click="open()" size="mini">确定生成</el-button>
        <el-button class="btn_1" type="primary" @click="newPlans()" size="mini">添加产品</el-button>
        <el-button class="btn_1" type="danger" size="mini">删除产品</el-button>
        <el-button class="btn_1" type="primary" size="mini">返回</el-button>
      </el-col>
    </el-row>
    <div class="body_main">
      <el-row>
        <el-col :span="24" style="text-align: center;margin-top: 15px;">
          <h3>生产计划单</h3>
        </el-col>
      </el-row>
      <div style="padding: 13px;">
        <el-form :model="newPlan">
          <el-row>
            <el-col :span="14" style="text-align: left;">
              <span class="span_01">生产理由:</span>
              <input value="新发生" class="input_01" />
            </el-col>
            <el-col :span="10" style="text-align: right;">
              <span class="span_01">供货时间:</span>
              <el-date-picker v-model="newPlan.supPlytime" type="date" style="width: 140px;" size="mini"
                placeholder="选择日期">
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row style="margin-top: 8px;">
            <el-col :span="8" style="text-align: left;">
              <span class="span_01">登记人:</span>
              <input v-model="newPlan.registrant" style="margin-left: 14px;" class="input_01" />
            </el-col>
            <el-col :span="16" style="text-align: right;">
              <span class="span_01">登记时间: {{newPlan.regtime}}</span>
              </el-date-picker>
            </el-col>
          </el-row>
          <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark"
            style="width: 100%;margin-top: 26px;overflow: scroll;height: 165px;"
            @selection-change="handleSelectionChange" size="mini">
            <el-table-column type="selection" width="65">
            </el-table-column>
            <el-table-column prop="pName" label="产品名称" width="100">
            </el-table-column>
            <el-table-column prop="proSige_id" label="产品编号" width="100">
            </el-table-column>
            <el-table-column label="数量" width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.num" controls-position="right" size="mini" style="width: 75px"
                  class="inputClass">

                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="100">
            </el-table-column>
            <el-table-column prop="price" label="设计单价(元)" width="100">
            </el-table-column>

            <el-table-column prop="sumPrice" label="生产单价(元)" width="170">
            </el-table-column>
            <el-table-column label="小计(元)" width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.countSum = scope.row.num* scope.row.sumPrice" controls-position="right"
                  size="mini" style="width: 75px" class="inputClass">
                </el-input>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-col :span="6" style="text-align: left;font-size: 14px;margin-top: 20px;">
              备注
            </el-col>
          </el-row>
          <textarea v-model="newPlan.remark"
            style="margin: 0px; width: 914px; height: 83px;margin-top: 6px;"></textarea>
        </el-form>
      </div>

    </div>



    <el-drawer title="添加产品" size="100%" :visible.sync="drawer" direction="ttb" :before-close="handleClose">
      <div class="div_01">
        <el-row style="background-color: whitesmoke;">
          <el-form ref="form" :model="form" label-width="80px">
            <el-col :span="16" style="text-align: left;">
              <el-form-item label="I级产品">
                <el-select v-model="form.region" placeholder="请选择活动区域" size="mini">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="text-align: right;">
              <el-form-item label="II级产品">
                <el-select v-model="form.region" placeholder="请选择活动区域" size="mini">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16" style="text-align: left;">
              <el-form-item label="III级产品">
                <el-select v-model="form.region" placeholder="请选择活动区域" size="mini">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="text-align: right;">
              <el-form-item label="产品名称">
                <el-input v-model="form.region" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div>
          <h4 style="text-align: left;margin-left: 12px;margin-top: 8px;">符合条件的产品总数 : {{tableData2.length}}例</h4>
        </div>
        <el-table border ref="multipleTable2" :data="tableData2" tooltip-effect="dark"
          style="width: 100%;margin-top: 14px;overflow: scroll;height: 200px;"
          @selection-change="handleSelectionChange2" size="mini">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <!-- SELECT p.proSige_id ,info.pName,`level`.protype ,p.price ,SUM(pcess.wuliaoSumPrice+pcess.gongShiPrice) AS sumPrice
            FROM  product_files p, pro_information info  ,protype `level`,`pd_ proprocess`  pcess
            WHERE p.pid=info.pid AND `level`.pid = info.`yongType` AND pcess.proSige_id=p.proSige_id
            GROUP BY p.proSige_id
            -->
          <el-table-column prop="proSige_id" label="产品编号" width="140">
          </el-table-column>
          <el-table-column prop="pName" label="产品名称" width="130">
          </el-table-column>
          <el-table-column prop="protype" label="用途类型" width="130">
          </el-table-column>
          <el-table-column prop="price" label="设计单价" width="130">
          </el-table-column>
          <el-table-column prop="sumPrice" label="生产单价" width="112">
          </el-table-column>
          <el-table-column label="生产" width="130">
            <template slot-scope="scope">
              <el-button v-if="scope.row.price >= scope.row.sumPrice" type="primary" size="mini" round="">生产</el-button>
              <el-button v-if="scope.row.price < scope.row.sumPrice" type="danger" size="mini" round="">价格调整</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div class="block" style="margin-top: 21px;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>
      <div style="margin-top: 14px; text-align: right; margin-right: 214px;">
        <span slot="footer">
          <el-button style="width: 45px ; height: 35px;" @click="drawer = false">关闭</el-button>
          <el-button style="width:  80px ; height: 35px;" type="primary"
            :disabled='multipleSelection2.length>0?false:true' @click="batchAdd()">批量添加</el-button>
        </span>
      </div>
    </el-drawer>
      
  
  </div>
</template>

<script>
  export default {
    name: 'repset',
    data() {
      return {
        drawer: false,
        pageNum: 1,
        pageSize: 4,
        total: 0,
        tableData: [],
        tableData2: [],
        multipleSelection: [],
        multipleSelection2: [],
        mpsDto: {
          newPlan: {},
          newPlanDetail: []
        },
        newPlan: {
          newpro_id: 0, // 新生计划ID
          supPlytime: '', // 供货时间
          registrant: '', // 登记人
          regtime: '', // 登记时间
          remark: '', // 备注
          check: '' // 审核
        },
        form: {
          region: ''
        }
      }
    },
    methods: {
      batchAdd() {
        var choose = this.multipleSelection2;

        for (var i = 0; i < choose.length; i++) {
          var num = this.tableData2.findIndex(item => {
            if (choose[i] == item.proSige_id) {
              return true;
            }
          })
          var data = this.tableData2[num];
          if (this.tableData.length == 0) {
            this.tableData.push(data);
          } else {
            var falg = false;
            for (var j = 0; j < this.tableData.length; j++) {
              if (this.tableData[j].proSige_id == this.tableData2[num].proSige_id) {
                falg = true; //前端传数组后端用集合接收
              }
            }
            if (!falg) {
              this.tableData.push(data);
            }
          }
        }
        this.drawer = false;
      },
      newPlans() {
        this.GetOnline(this.pageNum, this.pageSize);
        this.drawer = true;
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
            this.$refs.multipleTable2.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable2.clearSelection();
          this.multipleSelection = [];
          this.multipleSelection2 = [];
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = [];
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection.push(val[i].proSige_id)
        }
        console.log(this.multipleSelection);

      },
      handleSelectionChange2(val) {
        this.multipleSelection2 = [];
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection2.push(val[i].proSige_id)
        }
        console.log(this.multipleSelection2);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      GetOnline(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/NewPlanAddProductfindByPager', data).then(res => {
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.total = res.data.total;
          this.tableData2 = res.data.rows;
        }).catch(err => {
          console.log(err);
        })
      },
      getNewDate() {
        var date = new Date();
        console.log(date);
        var transverse = "-";
        var Verticalpoint = ":";
        var month = date.getMonth() + 1; //获取月份
        var strDate = date.getDate(); //获取具体的日期
        var strHour = date.getHours(); //获取...钟点
        var strMinute = date.getMinutes(); //获取分钟数
        var strSeconde = date.getSeconds(); //获取秒钟数
        //判断获取月份 、 具体的日期 、...钟点、分钟数、秒钟数 是否在1~9
        //如果是则在前面加“0”
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        console.log(month);
        if (strDate >= 1 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (strHour >= 1 && strHour <= 9) {
          strHour = "0" + strHour
        }
        console.log(strHour);
        if (strMinute >= 1 && strMinute <= 9) {
          strMinute = "0" + strMinute;
        }

        if (strSeconde >= 1 && strSeconde <= 9) {
          strSeconde = "0" + strSeconde;
        }
        //时间日期字符串拼接
        var NewDate = date.getFullYear() + transverse + month + transverse + strDate + " " +
          strHour + Verticalpoint + strMinute + Verticalpoint + strSeconde;
        //返回拼接字符串
        return NewDate;
      },
      addNewPanJIhua() {
        this.mpsDto.newPlan = this.newPlan;
        this.mpsDto.newPlanDetail = this.tableData;
        var data = this.mpsDto;
        this.$http.post('production/product/addNewPlan', this.$qs.stringify(data, {
          arrayFormat: 'list',
          allowDots: true
        })).then(res => {
          if (res.status === 200) {
            this.$message({
              showClose: true,
              message: '制定新生发生生产计划已实施,等待审核',
              type: 'success'
            });

             this.newPlan.supPlytime= '', // 供货时间
              this.newPlan.registrant= '', // 登记人
              this.newPlan.regtime=this.getNewDate(); // 登记时间
              this.newPlan.remark= '', // 备注
              this.tableData = [];
              this.mount();
          }
        }).catch(err => {
          console.log(err);
        })
      },
      open() {
        if (this.tableData.length <= 0) {
          this.$message.error('请添加产品');
          return;
        }
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '确定生成此设计单?'),
            h('i', {
              style: 'color: teal'
            }, '666')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              this.addNewPanJIhua();
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 1);
              }, 200);
            } else {
              done();
            }
          }
        }).then(action => {

        });
      }
    },
    mounted() {
      this.newPlan.regtime = this.getNewDate();
      console.log(this.newPlan.regtime);
    }
  }
</script>

<style scoped="scoped">
  * {
    padding: 0px;
    margin: 0px;
  }

  .div_01 {
    width: 850px;
    height: 400px;
    border-top: 1px solid #909399;
    /* #333333 */
    border-left: 1px solid #909399;
    border-right: 3px solid #909399;
    border-bottom: 3px solid #909399;
    margin: 0px auto;
  }

  td th {
    text-align: center;
  }

  .span_01 {
    font-size: 14px;
  }

  .body_main {

    margin: 0px auto;
    width: 940px;
    height: 450px;
    background-color: whitesmoke;
    margin-top: 15px;
 border-top: 1px solid #909399;
 /* #333333 */
 border-left: 1px solid #909399;
 border-right: 3px solid #909399;
 border-bottom: 3px solid #909399;
  }

  .btn_1 {
    width: 80px;
    height: 28px;
  }

  .el-input {
    width: 194px;
  }

  .input_01 {
    background-color: whitesmoke;
    border-top: none;
    border-right: none;
    border-left: none;
  }
</style>
